<template>
  <div class="app-container">
    <van-nav-bar :title="title" left-arrow @click-left="$router.back()" />
    <div class="content-box">
      <div class="list-box">
        <div class="list-content" v-if="itemList.length">
          <el-scrollbar>
            <div class="list-item" v-for="(item, index) in itemList" :key="index" @click="toDetail(item)">
              <div class="item-cover">
                <img class="cover-img" :src="item.imageUrl">
              </div>
              <div class="item-label-box">
                <div class="item-label">{{ item.label }}</div>
                <div class="item-tip" v-html="item.tip"></div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getGiftRecordList } from '@/api/condolenceManger/index.js';
import { getCompetitionsRecordList } from '@/api/competitionsManger/index.js';
import { getActivityRecordList } from '@/api/activityManger/index.js';
import { getBookRecordList } from '@/api/bookingManger/index.js';

export default {
  name: 'BookingIndex',
  data() {
    return {
      dataLoading: false,
      api: { getGiftRecordList, getCompetitionsRecordList, getActivityRecordList, getBookRecordList },
      title: '',
      itemList: [],
      condolenceItemList: [
        { label: '端午节慰问品领取', tip: '截止日期：2025年2月12日', cover: 'condolenceDistribution/duanwu.png' },
      ],
      registerItemList: [
        {
          label: 'AI技术讲解AI技术讲解AI技术讲解AI技术讲解',
          tip: '截止日期：2025年2月12日',
          cover: 'activityRegister/activity_item_cover.png',
        },
      ],
      voteItemList: [{ label: '劳模选举', tip: '截止日期：2025年2月12日', cover: 'vote/vote_item_cover.png' }],
      bookingItemList: [{ label: '越秀区羽毛球馆', tip: '目前剩余场地：10', cover: 'booking/item_cover.png' }],
    };
  },
  computed: {
    ...mapGetters(['userId']),
  },
  created() {
    this.title = this.$route.query.title;
    if (this.title == '我的礼品') this.getData('getGiftRecordList');
    if (this.title == '我的报名') this.getData('getCompetitionsRecordList');
    if (this.title == '我的投票') this.getData('getActivityRecordList');
    if (this.title == '我的订场') this.getData('getBookRecordList');
  },
  methods: {
    getData(funcName) {
      this.dataLoading = true;
      this.api[funcName]({ userId: this.userId }).then((res) => {
        this.itemList = res.rows.map((item) => {
          if (this.title == '我的礼品') {
            return {
              label: item.activityName,
              imageUrl: item.imageUrl,
              tip: item.optionName,
              routerParams: { name: 'CondolenceDistributionDetail', query: { collectId: item.collectId } },
            };
          }
          if (this.title == '我的报名') {
            return {
              label: item.competitionName,
              imageUrl: item.imageUrl,
              tip: `${item.registrationTime}`,
              routerParams: { name: 'ActivityRegisterDetail', query: { id: item.competitionId, recordId: item.id } },
            };
          }
          if (this.title == '我的投票') {
            return { label: item.activityName, imageUrl: item.imageUrl, tip: item.optionName };
          }
          if (this.title == '我的订场') {
            return {
              label: item.name,
              imageUrl: item.imageUrl,
              tip: `${item.fieldName}&nbsp;&nbsp;${item.bookTimePeriod}`,
              routerParams: { name: 'BookingDetail', query: { id: item.fieldId, bookTimePeriod: item.bookTimePeriod } },
            };
          }
        });
      });
    },
    toDetail(item) {
      this.$router.push(item.routerParams);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

@include list-box-style;
.list-box {
  height: calc(100% - 30px);
}
</style>
